<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化仪表盘</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 使用正确的Chart.js版本 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        info: '#1890FF',
                        light: '#F5F7FA',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark">
    <!-- 顶部导航栏 -->
    <header class="bg-white card-shadow fixed w-full z-10">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-bar-chart text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">数据可视化仪表盘</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button id="refreshBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-all duration-300 flex items-center">
                    <i class="fa fa-refresh mr-2"></i> 刷新数据
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="container mx-auto px-4 pt-24 pb-12">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- 图表卡片1：折线图 -->
            <div class="bg-white rounded-xl p-5 card-shadow card-hover">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="font-bold text-lg">销售趋势</h2>
                    <span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded-full">折线图</span>
                </div>
                <div class="h-64">
                    <canvas id="lineChart"></canvas>
                </div>
            </div>

            <!-- 图表卡片2：柱状图 -->
            <div class="bg-white rounded-xl p-5 card-shadow card-hover">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="font-bold text-lg">季度业绩</h2>
                    <span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded-full">柱状图</span>
                </div>
                <div class="h-64">
                    <canvas id="barChart"></canvas>
                </div>
            </div>

            <!-- 图表卡片3：饼图 -->
            <div class="bg-white rounded-xl p-5 card-shadow card-hover">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="font-bold text-lg">市场分布</h2>
                    <span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded-full">饼图</span>
                </div>
                <div class="h-64 flex items-center justify-center">
                    <canvas id="pieChart" class="w-48 h-48"></canvas>
                </div>
            </div>

            <!-- 图表卡片4：雷达图 -->
            <div class="bg-white rounded-xl p-5 card-shadow card-hover">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="font-bold text-lg">产品对比</h2>
                    <span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded-full">雷达图</span>
                </div>
                <div class="h-64 flex items-center justify-center">
                    <canvas id="radarChart" class="w-48 h-48"></canvas>
                </div>
            </div>

            <!-- 图表卡片5：极坐标图 -->
            <div class="bg-white rounded-xl p-5 card-shadow card-hover">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="font-bold text-lg">周活跃情况</h2>
                    <span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded-full">极坐标图</span>
                </div>
                <div class="h-64 flex items-center justify-center">
                    <canvas id="polarChart" class="w-48 h-48"></canvas>
                </div>
            </div>

            <!-- 图表卡片6：气泡图 -->
            <div class="bg-white rounded-xl p-5 card-shadow card-hover">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="font-bold text-lg">产品特性分析</h2>
                    <span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded-full">气泡图</span>
                </div>
                <div class="h-64">
                    <canvas id="bubbleChart"></canvas>
                </div>
            </div>

            <!-- 图表卡片7：散点图 -->
            <div class="bg-white rounded-xl p-5 card-shadow card-hover">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="font-bold text-lg">数据分布</h2>
                    <span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded-full">散点图</span>
                </div>
                <div class="h-64">
                    <canvas id="scatterChart"></canvas>
                </div>
            </div>

            <!-- 图表卡片8：复合图 -->
            <div class="bg-white rounded-xl p-5 card-shadow card-hover">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="font-bold text-lg">销售与增长</h2>
                    <span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded-full">复合图</span>
                </div>
                <div class="h-64">
                    <canvas id="mixedChart"></canvas>
                </div>
            </div>

            <!-- 图表卡片9：面积图 -->
            <div class="bg-white rounded-xl p-5 card-shadow card-hover">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="font-bold text-lg">用户增长</h2>
                    <span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded-full">面积图</span>
                </div>
                <div class="h-64">
                    <canvas id="areaChart"></canvas>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white card-shadow py-4">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>© 2023 数据可视化仪表盘 | 使用 Flask 和 Chart.js 构建</p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 存储所有图表实例
        const charts = {};
        
        // 加载所有图表
        async function loadAllCharts() {
            try {
                // 显示加载状态
                document.querySelectorAll('canvas').forEach(canvas => {
                    canvas.style.opacity = '0.5';
                });
                
                // 加载折线图
                charts.lineChart = await loadLineChart();
                
                // 加载柱状图
                charts.barChart = await loadBarChart();
                
                // 加载饼图
                charts.pieChart = await loadPieChart();
                
                // 加载雷达图
                charts.radarChart = await loadRadarChart();
                
                // 加载极坐标图
                charts.polarChart = await loadPolarChart();
                
                // 加载气泡图
                charts.bubbleChart = await loadBubbleChart();
                
                // 加载散点图
                charts.scatterChart = await loadScatterChart();
                
                // 加载复合图
                charts.mixedChart = await loadMixedChart();
                
                // 加载面积图
                charts.areaChart = await loadAreaChart();
                
                // 隐藏加载状态
                document.querySelectorAll('canvas').forEach(canvas => {
                    canvas.style.opacity = '1';
                });
                
            } catch (error) {
                console.error('加载图表时出错:', error);
                alert('加载图表数据失败，请刷新页面重试');
            }
        }
        
        // 加载折线图
        async function loadLineChart() {
            const ctx = document.getElementById('lineChart').getContext('2d');
            const response = await fetch('/api/line');
            const data = await response.json();
            
            return new Chart(ctx, {
                type: 'line',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                drawBorder: false,
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        }
        
        // 加载柱状图
        async function loadBarChart() {
            const ctx = document.getElementById('barChart').getContext('2d');
            const response = await fetch('/api/bar');
            const data = await response.json();
            
            return new Chart(ctx, {
                type: 'bar',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                drawBorder: false,
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        }
        
        // 加载饼图
        async function loadPieChart() {
            const ctx = document.getElementById('pieChart').getContext('2d');
            const response = await fetch('/api/pie');
            const data = await response.json();
            
            return new Chart(ctx, {
                type: 'pie',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });
        }
        
        // 加载雷达图
        async function loadRadarChart() {
            const ctx = document.getElementById('radarChart').getContext('2d');
            const response = await fetch('/api/radar');
            const data = await response.json();
            
            return new Chart(ctx, {
                type: 'radar',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        r: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                stepSize: 20
                            }
                        }
                    }
                }
            });
        }
        
        // 加载极坐标图
        async function loadPolarChart() {
            const ctx = document.getElementById('polarChart').getContext('2d');
            const response = await fetch('/api/polar');
            const data = await response.json();
            
            return new Chart(ctx, {
                type: 'polarArea',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });
        }
        
        // 加载气泡图
        async function loadBubbleChart() {
            const ctx = document.getElementById('bubbleChart').getContext('2d');
            const response = await fetch('/api/bubble');
            const data = await response.json();
            
            return new Chart(ctx, {
                type: 'bubble',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                drawBorder: false,
                            }
                        },
                        x: {
                            beginAtZero: true,
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        }
        
        // 加载散点图
        async function loadScatterChart() {
            const ctx = document.getElementById('scatterChart').getContext('2d');
            const response = await fetch('/api/scatter');
            const data = await response.json();
            
            return new Chart(ctx, {
                type: 'scatter',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                drawBorder: false,
                            }
                        },
                        x: {
                            beginAtZero: true,
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        }
        
        // 加载复合图
        async function loadMixedChart() {
            const ctx = document.getElementById('mixedChart').getContext('2d');
            const response = await fetch('/api/mixed');
            const data = await response.json();
            
            // 复合图需要特殊处理
            return new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.labels,
                    datasets: data.datasets.map(dataset => {
                        if (dataset.type === 'line') {
                            return {
                                ...dataset,
                                type: 'line',
                                borderWidth: 2,
                                fill: false,
                                yAxisID: 'y1'
                            };
                        } else {
                            return dataset;
                        }
                    })
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                drawBorder: false,
                            },
                            position: 'left'
                        },
                        y1: {
                            beginAtZero: true,
                            grid: {
                                drawOnChartArea: false,
                            },
                            position: 'right'
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        }
        
        // 加载面积图
        async function loadAreaChart() {
            const ctx = document.getElementById('areaChart').getContext('2d');
            const response = await fetch('/api/area');
            const data = await response.json();
            
            return new Chart(ctx, {
                type: 'line',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                drawBorder: false,
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        }
        
        // 刷新按钮事件处理
        document.getElementById('refreshBtn').addEventListener('click', async function() {
            this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...';
            this.disabled = true;
            
            // 销毁现有图表
            for (const chartId in charts) {
                if (charts[chartId] && typeof charts[chartId].destroy === 'function') {
                    charts[chartId].destroy();
                }
            }
            
            // 重新加载所有图表
            await loadAllCharts();
            
            // 恢复按钮状态
            this.innerHTML = '<i class="fa fa-refresh mr-2"></i> 刷新数据';
            this.disabled = false;
        });
        
        // 页面加载完成后初始化图表
        document.addEventListener('DOMContentLoaded', loadAllCharts);
    </script>
</body>
</html>